<template>
    <div class="search">
        <navbar></navbar>

        <!-- <template v-if="screenWidth>576 "> -->
            <!-- <div class="banner" v-if="childitem.imagesMobile && categroyType<3">
              <img class="imgwh" :src="link+childitem.imagesMobile" alt="">
            </div> -->
            <div class="banner-none"></div>
        <!-- </template> -->
            
        <div class="content-nav">
            <div class="top-left-icon" v-if="screenWidth>576"></div>
            <div class="bottom-right-icon" v-if="screenWidth>576"></div>
    
            <div class="text">
                <div class="acea-row row-between fs-14 cursor" @click.stop="backpage" v-if="screenWidth>576">
                    <div>所在位置：关键字搜索</div>
                    <div class="cursor"><<返回</div>
                </div>
                <div class="acea-row row-middle row-center mt-5">
                    <div class="bianti-icon">
                    <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/bianti-left.png" alt="">
                    </div>
                    <div class="title">搜索列表</div>
                    <div class="bianti-icon">
                    <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/biaoti-right.png" alt="">
                    </div>
                </div>
            </div>

            <div class="list-nav">
                <div class="item acea-row row-between row-middle cursor" v-for="(item,index) in list" :key="index" @click.stop="getinfo(item)">
                  <div class="acea-row row-middle ">
                    <div class="wenzhang-left-icon">
                      <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/wenzhang-left-icon.png" alt="">
                    </div>
                    <div class="wenben ellipsis">{{ item.name }}</div>
                  </div>
                  <div class="time-day">{{ item.year }}-{{ item.month }}-{{ item.day }}</div>
                </div>
            </div>
        </div>
        
        <div style="width:100%;height:3.125rem;"></div>
        <Pagination
            :pageNo="pageNo"
            :pageSize="4"
            :total="total"
            :continues="5"
            :screenWidth="screenWidth" 
            @getPageNo="getPageNo"
        />
        <div style="width:100%;height:3.125rem;"></div>

        <footers :screenWidth="screenWidth" @stopTop="scrollToTop"></footers>

    </div>
</template>
<script>
    import navbar from '@/components/navbar.vue';
    import footers from '@/components/footers.vue';
    import Pagination from '@/components/PaginaTion.vue'
    export default{
        name:'SearchView',
        components:{
            navbar,
            footers,
            Pagination
        },
        data(){
            return {
                screenWidth:'',
                meunitem:[],
                childitem:[],
                link: localStorage.getItem('link'),
                pageNo:1,
                total:'',
                list:[],
            }
        },
        watch: {
            // 监听路由对象中的变化
            '$route': {
                handler: function (to, from) {
                // 路由发生变化时触发的操作
                this.timekey = new Date().getTime();
                this.meunitem = JSON.parse(localStorage.getItem('meunitem'))
                this.childitem = JSON.parse(localStorage.getItem('childitem'))
                this.handleResize();
                window.addEventListener('resize', this.handleResize);
                this.scrollToTop();
                this.getlist();
                },
                // 设置为深度监听
                deep: true
            }
        },
        mounted(){
            this.scrollToTop();
            this.handleResize();
            window.addEventListener('resize', this.handleResize);
            this.getlist();
        },
        methods:{
            getPageNo(pageNo){
                this.pageNo = pageNo;
                this.getlist();
            },
            getlist(){
                let that = this;
                that._get('/api/portal/web/article/list',{
                    cid: that.$route.query.id,
                    pageSize: 10,
                    pageNum: that.pageNo,
                    orderByColumn:'sort_num,publish_time',
                    isAsc:'desc',
                    name: that.$route.query.keyword
                }).then(res=>{
                    that.list = res.data.rows;
                    that.total = res.data.total;
                })
            },
            getinfo(item){
                let that = this;
                localStorage.setItem('meunitem',JSON.stringify({ name: '关键字搜索' }))
                localStorage.setItem('childitem',JSON.stringify({ name: that.$route.query.keyword }))
                that.$router.push({ path:`/info?id=${item.id}` },()=>{}, ()=>{});
                
            },
            backpage(){
                this.$router.back();
            },
            handleResize() {
                this.screenWidth = window.innerWidth;
            },

            scrollToTop() {
                window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
                });
            },
        }
    }
</script>
<style lang="scss">
    body{
        background-color: #FFFBF0 !important;
    }
    .search{
        .banner-none{
            width: 100vw;
            height: 6.25rem;
            background-color: #FFFBF0;
          }

        .content-nav{
            width: 100vw;
            //min-height: 62.5rem;
            background-color: #FFFBF0;
            position: relative;
            overflow: hidden;
        
            .top-left-icon{
              width: 18.75rem;
              height: 18.75rem;
              background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/wenhuatopleft.png");
              background-size: 100% 100%;
              position: absolute;
              top: 1.25rem;
              left: -1.25rem;
            }
            .bottom-right-icon{
              width: 30rem;
              height: 30rem;
              background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/huawenbottomright.png");
              background-size: 100% 100%;
              position: absolute;
              bottom: 0;
              right: -6.25rem;
            }
            
            .text{
              width: 65%;
              margin: 1.875rem auto;
        
              .title{
                color: #1E5A54;
                font-size: 1.625rem;
                font-weight: bold;
                margin: 0 .625rem;
              }
              .bianti-icon{
                width: 5.4375rem;
                height: 2.75rem;
              }
        
            }

            .list-nav{
                margin: 1.875rem auto;
                width: 65%;
            
                .item:last-child{
                  border: none;
                }
                .item{
                  border-bottom: .0625rem dashed #907E4C;
                  padding: 1.25rem 0;
                  color: #333333;
                  font-size: 1.375rem;
            
                  .wenzhang-left-icon{
                    width: 1.375rem;
                    height: 1.375rem;
                  }
            
                  .wenben{
                   width: 50rem;
                    margin-left: 1.25rem;
                  }
            
                }
            
              }
        
          }

          @media screen and (max-width: 36rem) {

            .content-nav{

                .text{
                    width: 100%;

                }
                .list-nav{
                    width: 90%;
        
                    .item:last-child{
                        border-bottom: .0625rem dashed #907E4C;
                    }
                    .item{
            
                        .wenben{
                            font-size: .875rem;
                            width: 72%;
                        }
                        .time-day{
                            font-size: .75rem;
                            color: #999999;
                            margin: 1.25rem 0 0 2.5rem;
                        }
            
                    }
            
                }
            }


        }
      
        
    }
</style>